﻿<template>
    <div class="download-box px-10 h-[calc(100vh-60px)] text-black">
        <div class="m">
            <h1 class="mt-[130px] md:mt-[270px] text-center font30 leading-8">{{ t('Smooth') }}</h1>

            <h1 class="text-center font60 font-bold mt-5">{{ t('DownloadtheSignee') }}</h1>

            <div class="flex justify-center items-center mt-[66px]" v-if="device == 'pc'">
                <el-tooltip placement="bottom" effect="light">
                    <template #content>
                        <img class="w-[130px]" :src="IOS" alt="" v-if="IOS" />
                    </template>
                    <img
                        src="@/assets/imgs/download/ios.svg"
                        alt=""
                        class="w-[80px] h-[118px] border shadow-md p-2 rounded-md overflow-hidden hover:cursor-pointer"
                    />
                </el-tooltip>

                <el-tooltip placement="bottom" effect="light">
                    <template #content>
                        <img class="w-[130px]" :src="Android" alt="" v-if="Android" />
                    </template>
                    <img
                        src="@/assets/imgs/download/android.svg"
                        class="ml-20 w-[80px] h-[118px] border shadow-md p-2 rounded-md overflow-hidden hover:cursor-pointer"
                        alt=""
                    />
                </el-tooltip>
            </div>

            <div class="flex justify-center items-center mt-[66px]" v-else>
                <img
                    src="@/assets/imgs/download/ios.svg"
                    alt=""
                    class="w-[80px] h-[118px] border shadow-md p-2 rounded-md overflow-hidden hover:cursor-pointer"
                    @click="jump('ios')"
                />

                <img
                    src="@/assets/imgs/download/android.svg"
                    class="ml-20 w-[80px] h-[118px] border shadow-md p-2 rounded-md overflow-hidden hover:cursor-pointer"
                    alt=""
                    @click="jump('android')"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import api from '@/apis/base';
import { detectDevice } from '@/utils/utils';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
//@ts-ignore
import QRCode from 'qrcode';

import { useUserStore } from '@/stores/user';
import { computed, nextTick, onMounted, ref } from 'vue';
import { errorTips } from '@/utils/utils';
const userStore = useUserStore();

const Android = ref('');
const IOS = ref('');
const device = detectDevice();

onMounted(async () => {
    const res = await api.config({});
    if (!res || res.code != 1) return;
    const { data } = res;
    for (let key in data) {
        if (
            key != 'appDownloadUrlForAndroid' &&
            key != 'appDownloadUrlForIOS' &&
            key != 'officialUrl' &&
            key != 'webApiUrl'
        ) {
            data[key] = data[key] + '?fileId=';
        }
    }
    userStore.setUserConfig(data);
    // pc才展示二维码
    if (device != 'pc') return;

    QRCode.toDataURL(userStore.config.appDownloadUrlForAndroid)
        .then((url: string) => {
            Android.value = url;
        })
        .catch((err: any) => {
            Android.value = '';
            console.log(err);

            errorTips(t('eweim'));
        });

    QRCode.toDataURL(userStore.config.appDownloadUrlForIOS)
        .then((url: string) => {
            IOS.value = url;
        })
        .catch((err: any) => {
            IOS.value = '';
            errorTips(t('eweim'));
        });
});

const jump = (val: string) => {
    if (val === 'ios') {
        window.open(userStore.config.appDownloadUrlForIOS);
    } else {
        window.open(userStore.config.appDownloadUrlForAndroid);
    }
};
</script>

<style scoped lang="scss">
.download-box {
    background: url('@/assets/imgs/download/bg2.png') no-repeat center;
    background-size: cover;
}
</style>
